<style>
.over{
    max-height: 30vh;overflow: auto;
}
</style>
<div id="main">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="ntModalLabel">{:lang('setting_permission_of_employees_job')}</h4>
</div>
<div class="modal-body">
        <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    </div>
                </div>
            </div>
    <table class="table" v-cloak>
            <colgroup>
                <col width="170">
                <col>
              </colgroup>
        <tbody>
               <tr>
                <td>{:lang('job')}</td>
                <td style="text-align: left;">{{position}} </td>
            </tr>
               <tr>
                <td style="vertical-align:top;padding:1em">{:lang('job_permission')}<span class="required"></span></td>
                <td>
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs">
                                <li :class="{'active':index==0}" v-for="(menuitem,index) in menu">
                                    <a :href="'#'+menuitem.key" data-toggle="tab">{{menuitem.name}}</a>
                                </li> 
                            </ul>
                        </div>
                    </div>
                    <div class="cat_panel">
                            <div class="tab-content" style="min-height: 200px;">
                                <div role="tabpanel" :class="{'tab-pane':true,'active':index==0,'over':true}" :id="menuitem.key" v-for="(menuitem,index) in menu">
                                        <table class="table table-hover ntTable">
                                                <colgroup>
                                                    <col width="150">
                                                    <col width="200">
                                                    <col>
                                                  </colgroup>
                                                <tbody>
                                                    <tr v-for="(child,key) in menuitem.child" v-if="child.is_show">
                                                        <td><input type="checkbox" @click="checkfun(key,child.level,index)" :value="child.id" :checked="child.is_choose"></td>
                                                        <td>
                                                            <a href="javascropt:;" @click="toggle(index,key,child)" v-if="child.haschild && child.is_toggle"><span class="glyphicon glyphicon-minus" style="margin-right:0"></span></a>
                                                            
                                                            <a href="javascropt:;" @click="toggle(index,key,child)" v-if="child.haschild && !child.is_toggle"><span class="glyphicon glyphicon-plus" style="margin-right:0"></span></a>
                                                        </td>
                                                        <td :style="{'padding-left':child.level*4+'em','text-align':'left'}"><span class="fa fa-sitemap"></span>{{child.name}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                </div>
                            </div>
                        
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" id="act" value="{$str}">
    <input type="hidden" id="did" value="{$id|default=''}">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('cancel')}</button>
    <button type="button" class="btn btn-primary" @click="savefun" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</button>
</div>
</div>
<script>
new Vue({
    el:'#main',
    data:{
        position:'',
        menu:[],
        choose:[],
        repeat:true
    },
    mounted(){
        $.ajax({
            url:'/admin/organization/positionroot',
            data:{
                getposition:'',
                act:$('#act').val(),
                id:$('#did').val()
            },
            type:'post',
            success:(data)=>{
                data=JSON.parse(data)
                this.position=data.postionname
                if(data.info)
                this.choose=data.info.split(',')
                data.menu.forEach((element,index) => {
                    this.menu.push({    //取出主菜单
                        name:element.langname,
                        key:element.mkey,
                        child:[]
                    })
                    this.parsing(element,index,0,0)
                });
            }
        })
        $(document).keydown((event)=>{
            if (event.keyCode == 13) {
                this.savefun()
            }
        });
    },
    methods:{
        parsing(data,index,level,pid){
            if(data.child){
                data.child.forEach(element => {
                    var childval={
                        is_choose:this.choose.indexOf(element.id.toString())!=-1,
                        id:element.id,
                        name:element.langname,
                        is_show:level+1>=2?false:true,
                        is_toggle:false,
                        haschild:false,
                        level:level+1,
                        pid: pid
                    }
                    if(element.child){
                        childval.haschild=true
                        this.menu[index].child.push(childval)
                        this.parsing(element,index,level+1,element.id)
                    }else{
                        this.menu[index].child.push(childval)
                    }
                });
            }
        },
        checkfun(did,level,index){
            if(this.choose.indexOf(this.menu[index].child[did].id.toString())==-1){
                this.choose.push(this.menu[index].child[did].id.toString())
            }else{
                this.choose.splice(this.choose.indexOf(this.menu[index].child[did].id.toString()),1)
            }
            for(var i=did+1;i<this.menu[index].child.length;i++){
                if(this.menu[index].child[i].level>this.menu[index].child[did].level){
                    if(this.choose.indexOf(this.menu[index].child[did].id.toString())==-1){
                        this.menu[index].child[i].is_choose=false
                        if(this.choose.indexOf(this.menu[index].child[i].id.toString())!=-1)
                        this.choose.splice(this.choose.indexOf(this.menu[index].child[i].id.toString()),1)
                    }else{
                        this.menu[index].child[i].is_choose=true
                        this.choose.push(this.menu[index].child[i].id.toString())
                    }
                }else{
                    break;
                }
            }
        },
        savefun(){
            if(this.repeat){
                $.ajax({
                    url:'/admin/organization/positionroot',
                    type:'post',
                    data:{
                        id:$('#did').val(),
                        auth_ids:this.choose,
                        act:'positionroot'
                    },
                    success:(data)=>{
                        data=JSON.parse(data)
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert',data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*'+data.msg+'<br>')
                        } else {
                            change_mes_type('.alert',data.status)
                            this.repeat=false
                            $('.alert').show()
                            $('.alert p').html(data.msg+'<br>')
                            $('#position2menu_editModal').modal('hide')
                        }
                    }
                })
            }
        },
        toggle(index,key,child){
            /* 全部关闭 */
            for(var n=0;n<this.menu[index].child.length;n++){
                if(n!=key)
                if(this.menu[index].child[n].level!==1){
                    this.menu[index].child[n].is_show= false
                    this.menu[index].child[n].is_toggle= false
                }else{
                     this.menu[index].child[n].is_show= true
                    this.menu[index].child[n].is_toggle= false
                }
            }
            /* 显示或关闭点击的子级 */
            for(var i=key+1;i<this.menu[index].child.length;i++){
                if(this.menu[index].child[i].level==this.menu[index].child[key].level+1){
                    this.menu[index].child[i].is_show = !this.menu[index].child[key].is_toggle
                    this.menu[index].child[i].is_toggle= this.menu[index].child[key].is_toggle
                }else{
                    break;
                }
            }
            this.openparent(index,key)
            this.menu[index].child[key].is_toggle=!this.menu[index].child[key].is_toggle
        },
        openparent(index,key){
             /* 打开上级 */
             for(var k=0;k<this.menu[index].child.length;k++){
                 if(this.menu[index].child[key].pid==this.menu[index].child[k].id){
                    this.menu[index].child[k].is_show=true
                    this.menu[index].child[k].is_toggle=true
                    if(this.menu[index].child[k].pid)
                     this.openparent(index,k)
                 }                 
             }
        }
    }
})
</script>